<template>
  <div>
      <el-form :model="fenzu" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
          <el-form-item>
              <el-button @click="addDomain">添加分组</el-button>
          </el-form-item>

          <el-form-item
            v-for="(domain, index) in fenzu.mainFenzu"
            :label="'分组' + index"
            :key="domain.key"
            :prop="'mainFenzu.' + index + '.value'"
            :rules="{
                required: true, message: '域名不能为空', trigger: 'blur'
            }"
        >
            <el-input v-model="domain.value"></el-input>
            <el-button @click.prevent="removeDomain(domain)">删除(主)</el-button>
            <el-button @click.prevent="addChildren(domain)">添加子分支(主)</el-button>
            <!-- 嵌套子分支 -->
            <div
                v-for="(item,idx) in domain.children"
                :key='idx'
                :label='"子分支"+idx'
                :prop="'mainFenzu.' + index + '.children'+idx+'.value'"
                :rules="{
                    required: true, message: '域名不能为空', trigger: 'blur'
                }"
            >
                <el-input v-model="item.value"></el-input>
                <el-button @click.prevent="removeChildren(item,domain)">删除子分支</el-button>
            </div>
        </el-form-item>
        <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default {
  name:'DynaForm',
  props:['cid'],
  data(){
      return{
        fenzu: {
            mainFenzu: [{
                value: '',
                key:1,
                children:[
                    {
                        value:'',
                        key:11
                    }
                ]
            }]
        }
      }
  },
  methods:{
    //   提交form
      submitForm(formName) {
        let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$api.getInsertItemParam({
                itemCatId:_this.cid,
                paramData:JSON.stringify(this.fenzu.mainFenzu)
            })
            .then(data=>{
                if(data.status == 200){
                    _this.$message({
                        message:'添加成功',
                        type:'success'
                    })
                    _this.$emit('close')
                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    //   重置Form
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      addDomain(){
          this.fenzu.mainFenzu.push({
              value:'',
              key:this.fenzu.mainFenzu.length+1,
              children:[{
                  value:'',
                  key:(this.fenzu.mainFenzu.length+1) + '1'
              }]
          })
      },
      addChildren(parent){
          parent.children.push({
              value:'',
              key:parent.children.length + 1
          })
      },
      removeDomain(domain){
          let index = this.fenzu.mainFenzu.indexOf(domain);
          if(index !== -1){
              this.fenzu.mainFenzu.splice(index,1)
          }
      },
      removeChildren(item,domain){
          let index = domain.children.indexOf(item);
          if(index !== -1){
              domain.children.splice(index,1)
          }
      }
  }
}
</script>

<style>

</style>